{% extends 'social_base.html' %}
{% load static %}
{% block title %}
朋友圈
{% endblock %}
{% block head %}

<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
        background-image: url('{% static 'images/img.png'%}');
        background-size: cover;
    }
</style>
{% endblock %}
{% block body %}
<div class="profile-container">

    <h1 style="position:relative;left: auto;border-bottom: #bb2d3b">朋友圈</h1>
    <a href="{% url 'create_post' username=user.user.username %}" class="btn btn-light"
        style="font-size: 25px;background-color: #9eeaf9">发布朋友圈</a>
    <a href="{% url 'my_posts' username=user.user.username %}" class="btn btn-light"
        style="font-size: 25px;background-color: #9eeaf9">我的朋友圈</a>

    {% for post in friend_posts %}

    <div style="background-color: whitesmoke;border-radius: 10px;margin-top: 10px;padding: 10px">

        <p style="font-size: 30px"><strong>{{ post.user.nickname }}</strong></p>
        <p class="post-font">{{ post.content }}</p>
        {% if post.image %}
        <img src="{{ post.image.url }}" alt="Post Image" class="limited-image" style="max-width: 800px; /* 限制图片的最大宽度为300像素 */
    max-height: 800px; /* 限制图片的最大高度为300像素 */
    width: auto; /* 让浏览器根据设置的 max-width 和 max-height 来自动调整宽度 */
    height: auto; /* 让浏览器根据设置的 max-width 和 max-height 来自动调整高度 */">
        {% endif %}
        <p>{{ post.created_at }}</p>
    </div>
    {% endfor %}
</div>

{% endblock %}